<template>
    <div class="layout-route online-detail">
        <el-form ref="form" :model="model" :rules="rules" label-width="100px" v-loading="loading">
            <el-row type="flex" class="card top">
                <el-col :span="8"></el-col>
                <el-col :span="16">
                    <el-row class="table-header">
                        <el-col :span="12">商品信息</el-col>
                        <el-col :span="4">单价</el-col>
                        <el-col :span="4">数量</el-col>
                        <el-col :span="4">金额</el-col>
                    </el-row>
                </el-col>
            </el-row>
            <div v-for="(detail, index) in model.list" :key="index">
                <div class="card">
                    <el-row type="flex" style="background-color: #f5f5f5; padding: 8px 12px; border-bottom: 1px solid #eee">
                        <el-col :span="12">
                            <span style="position: relative; padding-right: 36px">
                                {{ detail.supply_name }}
                                <sub style="font-size: 12px; color: #ffba00; position: absolute; right: 8px; top: -4px" v-if="detail.is_1688 == 1">1688</sub>
                            </span>
                        </el-col>
                        <el-col :span="12" style="text-align: right">
                            <span>{{ detail.warehouse }}</span>
                        </el-col>
                    </el-row>
                    <el-row type="flex">
                        <el-col :span="8" style="background-color: #f5f5f5; padding: 8px 12px">
                            <el-form-item label="下单账号" prop="account_1688" v-if="detail.is_1688 == 1">
                                <el-select v-model="detail.account_1688" placeholder="请选择下单账号" filterable clearable @change="()=>chooseSupply(detail, index)">
                                    <el-option v-for="dict in dict.addressList" :key="dict.id" :label="dict.account_1688" :value="dict.account_1688"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="收货地址" v-if="detail.is_1688 == 1">
                                <span style="line-height: 22px">{{ detail.address }}</span>
                            </el-form-item>
                            <el-form-item label="采购者" prop="track_fee_type">
                                <el-select v-model="detail.operate_id" placeholder="请选择采购者" clearable size="small">
                                    <el-option v-for="(dict, index) in dict.salesmanList" :key="index" :label="dict.username" :value="dict.operater_id" />
                                </el-select>
                            </el-form-item>

                            <el-form-item label="运费均摊" prop="track_fee_type">
                                <el-select v-model="detail.track_fee_type" placeholder="请选择运费均摊">
                                    <el-option v-for="dict in dict.freightList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="买家留言" prop="1688_remark" v-if="detail.is_1688 == 1">
                                <el-input type="textarea" v-model="detail['1688_remark']" :rows="1"></el-input>
                            </el-form-item>
                            <el-form-item label="备注" prop="remark">
                                <el-input type="textarea" v-model="detail.remark" :rows="1"></el-input>
                                <div class="color-list">
                                    <div class="color-item" v-for="item in dict.colorList" :key="item.value" :style="{ backgroundColor: item.label, borderColor: item.value == detail.remark_color ? '#000' : '#fff' }" @click="chooseColor(detail, item, index)"></div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16" class="table-body" style="padding: 8px 12px; border: 1px solid #eee; border-top: none;">
                            <div v-for="(sku, subIndex) in detail.sku_info" :key="subIndex" class="mb8" style="border-bottom: 1px solid #eee">
                                <el-row class="table-row mb8">
                                    <el-col :span="12">
                                        <div class="flex" style="padding: 4px">
                                            <div style="width: 60px">
                                                <ImageUploadImg v-model="sku.image_url" :readOnly="true" class="small-img"></ImageUploadImg>
                                            </div>
                                            <div>
                                                <div>{{ sku.seller_sku }}</div>
                                                <div style="color: #666">{{ sku.spu }}</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">{{ sku.purchase_price }}</el-col>
                                    <el-col :span="4">x {{ sku.purchase_nums }}</el-col>
                                    <el-col :span="4" class="text-red">{{ (sku.purchase_price * sku.purchase_nums).toFixed(2) }}</el-col>
                                </el-row>
                                <el-row class="table-row mb8" v-if="sku['1688_product_url']">
                                    <el-col :span="18">
                                        <div class="flex" style="position: relative; background-color: #f5f5f5; padding: 4px">
                                            <div style="width: 60px">
                                                <ImageUploadImg v-model="sku['1688_product_image']" :readOnly="true" class="small-img"></ImageUploadImg>
                                            </div>
                                            <div>
                                                <div>{{ sku['1688_product_name'] }}</div>
                                                <div style="color: #666">
                                                    <span v-if="sku.varient_colour">颜色：{{ sku.varient_colour }}</span>
                                                    <span v-if="sku.varient_size">尺码：{{ sku.varient_size }}</span>
                                                </div>
                                            </div>
                                            <div style="position: absolute; left: 6px; top: -8px; color: #ffba00; font-size: 12px" v-if="sku.is_1688 == 1">1688商品</div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="card sums-warp">
                <span class="sums-item">供货商数量：<span class="text-red">{{ totalSupply }}</span></span>
                        <span class="sums-item">商品种类：<span>{{ totalSku }} 种</span></span>
                        <span class="sums-item">数量总计：<span>{{ totalSums }} 件</span></span>
                        <!-- <span class="sums-item">运费：<span>0.00 元</span></span> -->
                        <span class="sums-item">应付总额：<span class="text-red">{{ totalAmount }}元</span></span>
            </div>

            <div style="text-align: right; padding: 24px 0">
                <el-button type="primary" :disabled="save" @click="submit">提交采购单</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import { getPurchaserList, get_1688_address, purchaseDetail, purchaseSubmit } from '@/api/purchase'
export default {
    name: 'SuggestPlanDetail',
    components: {},
    props: {
        params: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            model: {
                list: [],
            },
            rules: {},
            dict: {
                freightList: [
                    { label: '按数量', value: 1 },
                    { label: '按金额', value: 2 },
                    { label: '按质量', value: 3 },
                    { label: '不均摊', value: 4 },
                ],
                addressList: [],
                salesmanList: [],
                colorList: [
                    { label:'#c03639', value: 1},
                    { label:'#30b08f', value: 2}
                ],
            },
            loading: false,
            save: false,
        }
    },
    computed: {
        totalSupply() {
            return this.model.list?.length ?? 0
        },
        totalSku() {
            if (this.totalSupply == 0) return 0
            return this.model.list.reduce((sum, row) => {
                return ( sum + row.sku_info.length )
            }, 0)
        },
        totalSums() {
            // return this.totalSupply + this.totalSku
            if (this.totalSupply == 0) return 0
            let sum = this.model.list.reduce((sum, row) => {
                return (
                    sum +
                    row.sku_info.reduce((subSum, sku) => {
                        return subSum + (sku.purchase_nums || 0)
                    }, 0)
                )
            }, 0)
            return sum
        },
        totalAmount() {
            if (this.totalSupply == 0) return 0.00
            let sum = this.model.list.reduce((sum, row) => {
                return (
                    sum +
                    row.sku_info.reduce((subSum, sku) => {
                        return subSum + (sku.purchase_nums * sku.purchase_price || 0)
                    }, 0)
                )
            }, 0)
            return sum.toFixed(2)
        },
    },
    // watch: {
    //     $route: {
    //         handler(val, oldVal) {
    //             if (val.query.ids !== oldVal.query.ids) {
    //                 this.model.ids = val.query.ids
    //                 this.getDetail()
    //             }
    //         },
    //         immediate: true,
    //         deep: true
    //     }
    // },
    async created() {
        this.loading = true
        try {
            const [addressData, salesmanData] = await Promise.all([get_1688_address(), getPurchaserList()])
            this.dict.addressList = addressData?.data ?? []
            this.dict.salesmanList = salesmanData?.data ?? []
        } catch (error) {}
        this.loading = false
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        chooseColor(row, item, index) {
            row.remark_color = item.value
            this.$set(this.model.list, index, row)
        },
        chooseSupply(row, index) {
            row.address = this.dict.addressList.find(item=>item.account_1688 == row.account_1688)?.address ?? ''
            this.$set(this.model.list, index, row)
        },
        getDetail() {
            const ids = this.$route.query?.ids ?? null
            if (!ids) return
            this.loading = true
            purchaseDetail({ids})
                .then(response => {
                    this.model.list = response.data.list
                })
                .finally(() => {
                    this.loading = false
                })
        },

        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }

                const params = { sku_list: this.model.list }
                if (this.save) {
                    return
                }
                this.save = true
                purchaseSubmit(params)
                    .then(res => {
                        this.$message.success(res.msg)

                        this.$emit('success')
                        this.$router.replace({path: '/purchase/purchases'})
                    })
                    .finally(() => {
                        this.save = false
                    })
            })
        },
        cancel() {
            this.$emit('cancel')
            this.$router.go(-1)
        },
    },
}
</script>

<style lang="scss" scoped>
.table-row {
    padding: 4px 2px;
}
.color-list {
  display: flex;
  align-items: center;
  height: 36px;
}
.color-item {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
  border: 2px solid #fff;
}
.text-red {
    color: #f40;
}
.mb8 {
    margin-bottom: 8px;
}
.online-detail {
    .header {
        padding-bottom: 8px;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 16px;

        .header-title {
            margin-left: 16px;
            font-size: 16px;
        }
    }
    .card {
        padding: 12px 16px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 12px;
        border-radius: 4px;
    }
    .card.top {
        background: #f5f5f5;
    }
    .card.sums-warp {
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .sums-item{
        color: #666;
        margin-left: 36px;
    }
}
    .card > .title {
        padding-bottom: 16px;
        border-bottom: 1px solid #f5f5f5;
        margin: 0;
        margin-bottom: 12px;
        text-align: left;
        color: #333;
    }
    .el-form-item {
        width: calc(100% - 10px);
        .el-cascader,
        .el-select,
        .el-textarea,
        .el-input {
            width: 100%;
        }
    }
}

.item-card {
    border: 1px solid #f5f5f5;
    padding: 8px;
}
.ml_12 {
    margin-left: -12px;
}
::v-deep .small-img {
    .upload-img-wrap {
        width: 54px;
    }
    .upload-img-box {
        width: 50px;
        height: 50px;
    }
    .upload-img {
        width: 48px;
        height: 48px;
    }
}
</style>
